<template>
    <ContentWrap style="width: 851px; border-radius: 20px;">
        <div style="display: flex;">
            <div style="text-align: center; padding: 14px 34px 14px 41px;">
                <p class="head">上架中</p>
                <p class="below">商品状态</p>
            </div>
            <el-divider direction="vertical" style="height: 100px;" />
            <div style="text-align: center; padding: 14px 34px 14px 41px;">
                <p class="head">10</p>
                <p class="below">商品总数</p>
            </div>
            <el-divider direction="vertical" style="height: 100px;" />

            <div style="text-align: center; padding: 14px 34px 14px 41px;">
                <p class="head">7</p>
                <p class="below">上架商品</p>
            </div>
            <el-divider direction="vertical" style="height: 100px;" />

            <div style="text-align: center; padding: 14px 34px 14px 41px;">
                <p class="head">3</p>
                <p class="below">下架商品</p>
            </div>
            <el-divider direction="vertical" style="height: 100px;" />

            <div style="text-align: center; padding: 14px 34px 14px 41px;">
                <p class="head">33</p>
                <p class="below">剩余天数</p>
            </div>
        </div>
    </ContentWrap>

    <ContentWrap>
        <el-button style="border: none;">返回列表</el-button>
        <el-divider />
        <div class="main">
            <div class="left">
                <el-form :model="form" label-width="70px">
                    <el-form-item label="商品名称">
                        <el-input v-model="form.name" style="width: 392px;" />
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="form.price" style="width: 392px;" />
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input v-model="form.number" style="width: 392px;" />
                    </el-form-item>
                    <el-form-item label="生产日期">
                        <el-input v-model="form.timer" style="width: 392px;" />
                    </el-form-item>
                    <el-form-item label="品牌">
                        <el-input v-model="form.pice" style="width: 392px;" />
                    </el-form-item>
                    <el-form-item label="照片">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <template #file="{ file }">
                                <div>
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                            <el-icon><zoom-in /></el-icon>
                                        </span>
                                        <span v-if="!disabled" class="el-upload-list__item-delete"
                                            @click="handleRemove(file)">
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                        </span>
                                    </span>
                                </div>
                            </template>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                    </el-form-item>
                </el-form>
                <div style="display: flex; justify-content: flex-end">
                    <el-button>取消</el-button>
                    <el-button type="primary">保存</el-button>
                </div>
            </div>
            <div class="right">

                <!-- 富文本框 -->
                <p style="margin-bottom: 10px;">商品详情</p>
                <Editor v-model:modelValue="formData.description" height="150px" style="border-radius: 20px;" />
            </div>
        </div>
    </ContentWrap>
</template>

<script setup lang="ts">
const form = reactive({
    name: '',
    price: '',
    number: '',
    timer: '',
    pice: '',
})


// 上传图片
import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
    console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}


// 富文本框
const formData = ref({
    description: undefined,
})
</script>

<style lang="scss" scoped>
.head {
    font-size: 26px;
    font-weight: 500;
}

.below {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
}

.main {
    display: flex;

    .left {
        margin-right: 30px;
    }
}

::v-deep.el-form-item--default .el-form-item__label {
    justify-content: flex-start;
}

::v-deep.el-upload--picture-card {
    width: 80px;
    height: 80px;
}
</style>